<template>
   <view class="tab-bar">
      <view 
        v-for="(item, index) in tabBar.list" 
        :key="index" 
        class="tab-bar-item"
        @click="handleTabClick(item, index)">
        <!-- 普通TabBar项 -->
        <view class="item-content" v-if="index != 2">
          <image 
            :src="index === middleIndex ? item.selectedIconPath : item.iconPath" 
            class="icon"
          ></image>
          <text :class="{ 'selected': index === middleIndex }">{{ item.text }}</text>
        </view>
        
        <!-- 中间凸起按钮 -->
        <view class="middle-btn" v-else>
          <image 
            src="/static/tabbar/tabbar5.png"
            class="middle-icon"
			mode="heightFix"
          ></image>
		  <text :class="{ 'selected': index === middleIndex }" style="margin-left: 30rpx;">{{ item.text }}</text>
        </view>
      </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'

const prop = defineProps({
	// 中间凸起按钮的索引
	middleIndex: {
		type: Number,
		default: 0
	},
})
// 定义事件
const emitEvent = defineEmits(['tab-click'])

// TabBar配置数据
const tabBar = ref({
  color: "#333333",
  selectedColor: "#34A855",
  backgroundColor: "#ffffff",
  list: [
    {
      pagePath: "/pages/tabbar/member",
      text: "会员商家",
      iconPath: "/static/tabbar/tabbar1.png",
      selectedIconPath: "/static/tabbar/tabbar2.png"
    },
    {
      pagePath: "/pages/tabbar/supply",
      text: "供应大厅",
      iconPath: "/static/tabbar/tabbar3.png",
      selectedIconPath: "/static/tabbar/tabbar4.png"
    },
    {
      text: "发布"
    },
    {
      pagePath: "/pages/tabbar/wantbuy",
      text: "求购大厅",
      iconPath: "/static/tabbar/tabbar6.png",
      selectedIconPath: "/static/tabbar/tabbar7.png"
    },
    {
      pagePath: "/pages/tabbar/mine",
      text: "我的",
      iconPath: "/static/tabbar/tabbar8.png",
      selectedIconPath: "/static/tabbar/tabbar9.png"
    }
  ]
})

// 处理Tab点击
const handleTabClick = (item, index) => {
  // 触发点击事件，允许父组件自定义处理
  emitEvent('tab-click', { item, index })
 
}
</script>

<style scoped>
.tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background-color: #ffffff;
  border-top: 2rpx solid #eee;
  z-index: 999;
}

.tab-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.item-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon {
  width: 48rpx;
  height: 48rpx;
}

.tab-bar-item text {
  font-size: 20rpx;
  color: #333333;
  margin-top: 10rpx;
}

.tab-bar-item text.selected {
  color: #34A855;
}

/* 中间凸起按钮样式 */
.middle-item {
  height: 100rpx;
  position: relative;
}

.middle-btn {
  position: absolute;
  top: -50rpx; /* 向上凸起25px */
  width: 112rpx;
  height: 112rpx;
  border-radius: 50%;
  background-color: #FFFFFF;
 /* display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 122, 255, 0.3); */
}

.middle-icon {
  position: absolute;
  left: -60rpx;
  top: 6rpx;
  width: 100%;
  height: 96rpx;
  tint-color: #ffffff; /* 图标颜色 */
}
.middle-btn text {
	position: absolute;
	bottom: -40rpx;
}
</style>
